<template>
  <div class="">
    <el-dialog
      title="添加"
      :visible.sync="open"
      width="1000px"
      append-to-body
      class="dia-style k-dia"
      ref="k_dia"
    >
      <div class="email-dia">
        <aside>
          <div class="option-group">
            <li
              @click="islink = 0"
              :class="islink == 0 ? 'activeLink' : ''"
              href="#jichu"
            >
              基础信息
            </li>
            <li
              @click="islink = 1"
              :class="islink == 1 ? 'activeLink' : ''"
              href="#email"
            >
              应急响应内容
            </li>
          </div>
        </aside>
             <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
        class="dia-form"
      >
        <div v-show="islink == 0">
          <el-col :span="14">
            <el-form-item label="名称" prop="field101">
              <el-input
                v-model="formData.field101"
                placeholder="请输入名称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="关联事件" prop="field102">
              <el-select
                v-model="formData.field102"
                placeholder="请输入关联事件"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in field102Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="描述" prop="field103">
              <el-input
                v-model="formData.field103"
                type="textarea"
                placeholder="请输入描述"
                :maxlength="1000"
                show-word-limit
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="创建人" prop="field106">
              <el-input
                v-model="formData.field106"
                placeholder="请输入创建人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="启用状态" prop="field108" required>
              <el-switch v-model="formData.field108"></el-switch>
            </el-form-item>
          </el-col>
        </div>
        <div v-show="islink == 1">
         <el-col :span="24" style="margin-bottom: 18px">
          <span class="el-icon-help" style="color: #2979ff" @click="AddClick">添加</span>
        </el-col>
                <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{ background: '#F3F5FC' }"
          >
            <el-table-column
              prop="index"
              label="序号"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="name" label="名称" width="240">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="代码" width="240">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.code"
                  :disabled="scope.row.code != ''"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
              <template slot-scope="scope">
                <span
                  style="color: blue"
                  v-if="scope.row.operate == ''"
                  @click.stop="MoveClick"
                  >删 除</span
                >
                <span v-else>{{ scope.row.operate }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        </div>
      </el-form>
      </div>
 

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">保 存</el-button>
        <el-button @click="open = false">取 消</el-button>
        
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      islink: 0,
      // 是否显示遮罩层
      open: false,
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field106: "ceshi",
        field108: true,
      },
      rules: {
        field101: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入关联事件",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
        field106: [
          {
            required: true,
            message: "请输入创建人",
            trigger: "blur",
          },
        ],
      },
      field102Options: [
        {
          label: "防火墙阻断异常IP进入",
          value: 1,
        },
        {
          label: "终端长期未上线",
          value: 2,
        },
        {
          label: "网络中出现异常数据",
          value: 3,
        },
      ],
           tableData: [
        {
          index: 1,
          name: "未超期",
          code: 0,
          operate: "---",
        },
        {
          index: 2,
          name: "超期",
          code: 1,
          operate: "---",
        },
        {
          index: 3,
          name: "非法占用",
          code: 0,
          operate: "---",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
        // 增加弹框数据
    AddClick() {
      const arr = {
        index: this.tableData[this.tableData.length - 1].index + 1,
        name: "",
        code: "",
        operate: "",
      };
      this.tableData.push(arr);
    },
      MoveClick() {
      this.tableData.pop();
    },
  },
};
</script>
<style lang="scss" scoped>
.email-dia {
  display: flex;
  height: 540px;
  width: 100%;
  justify-content: space-between;
  max-height: 100vh;

  aside {
    padding: 0;
    width: 140px !important;
    position: absolute;
    height: 540px;
    background: #fff;
    border-right: 1px solid #e8e8e8;

    .option-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0 15px 24px;
        cursor: pointer;
        font-size: 14px;
        color: #303032;
        font-weight: 400;

        &.activeLink {
          border-right: 2px solid #2979ff;
          background: #dfecff;
          color: #2979ff;
        }
      }
    }
  }

  .dia-form {
    margin-left: 140px;
    padding: 24px 80px 24px 24px;
    width: 100%;
    height: 100%;
  }
  .el-table{
  margin-top: 0;
}
}

</style>
<style>
.k-dia.dia-style  .el-dialog .el-dialog__body {
  padding: 0 !important;
}

</style>